<template>
  <div class="Login" v-if="isLogin">
    <h2>请登录</h2>
    <mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <div>
      <mt-button type="primary" @click.native="login">登录</mt-button>
      <mt-button type="default" @click.native="reset">重置</mt-button>
    </div>
    <div class="reg">
      <router-link to="/reg">
        <a>
          前往注册新账号！
        </a>
      </router-link>
    </div>
  </div>
  <div class="head" v-else>
    <h2>欢迎您！</h2>
    <img src="@/assets/images/select/my.png" alt="">
    <mt-button type="danger" size="small" @click.native="loginout">注销</mt-button>
  </div>

</template>
<script>
import Qs from 'qs'
import { Toast } from "mint-ui";
export default {
  name: "LoginCom",
  data() {
    return {
      phone: '',
      password: '',
      isLogin: true
    };
  },

  methods: {
    reset() {
      this.phone = '',
        this.password = ''
    },
    login() {
      this.isLogin = false

      if (/^\d{6}$/.test(this.phone) && /^\d{3}$/.test(this.password)) {
        const params = Qs.stringify({
          phone: this.phone,
          password: this.password
        })
        this.$axios.post('login', params).then(rs => {
          if (rs) {
            this.$store.state.userInfo = rs;


          } else {
            Toast('账号或密码输入错误');
          }
        })
      }
    },
    loginout() {
      this.isLogin = true
      this.reset()
      this.$store.state.userInfo = '';
    }
  },
};
</script>
<style scoped lang="less">
.Login {
  padding-right: 10px;

  h2 {
    text-align: center;
    margin-top: 30px;
  }

  .reg {
    margin-top: 30px;
    text-align: center;

    a,
    a:visited {
      text-decoration: none;
      color: rgb(27, 156, 231);

      &:hover {
        color: aqua;
      }
    }

  }



  div {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;

    .mint-button--normal {
      padding: 0 20px;
      height: 35px;

    }
  }


}

.head {
  display: flex;
  flex-direction: column;
  justify-items: center;
  margin-top: 30px;

  h2 {
    text-align: center;

  }

  img {
    width: 50%;
    margin-left: 25%;
  }
}
</style>
